<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="../build/react.js"></script>
  <script src="../build/react-dom.js"></script>
  <script src="../build/browser.min.js"></script>
  <script src="../build/jquery.min.js"></script>
  <title>demo12</title>
</head>
<body>
  <div id="example"></div>
  <script type="text/babel">
    var RepoList = React.createClass({
      getInitialState: function(){
        return {
          loading: true,
          error: null,
          data: null
        }
      },
      componentDidMount(){
        this.props.promise.then(
          value => this.setState({loading: false,data:value}),
          error => this.setState({loading: false,erroe:error})
        )
      },
      render: function(){
        if(this.state.loading){
          return <span>loading...</span>;
        }else if(this.state.error != null){
          return <span>Error: {this.state.error.message}</span>
        }else{
          var repos = this.state.data.items;
          var repoList = repos.map(function(repo){
            return (
              <li>
                <a href={repo.html_url}>{repo.name}</a>({repo.stargazers_count} starts)<br/>
                {repo.description}
              </li>
            );
          });
          return (
            <main>
              <h1>Most Popular JavaScript Project in Github</h1>
              <ol>{repoList}</ol>
            </main>
          );
        }
      }
    });

    ReactDOM.render(
      <RepoList promise={$.getJSON('https://api.github.com/search/repositories?q=javascript&sort=stars')} />,
      document.getElementById('example')
    )
  </script>
</body>
</html>